<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="交易详情"></c-nav-bar>
		<block v-if="item">
			<view class="top">
				<text class="t_title">{{item.title}}</text>
				<text class="t_price" v-if="item.consumeType">{{[2,4].includes(item.consumeType)?'+':''}}{{item.amount}}</text>
			</view>
			<view class="item">
				<view class="i_title">交易时间</view>
				<view class="i_text">{{item.createDate||''}}</view>
			</view>
			<view class="item">
				<view class="i_title">付款方式</view>
				<view class="i_text">{{payTypeCfg[item.payType]}}</view>
			</view>
			<view class="item">
				<view class="i_title">交易类型</view>
				<view class="i_text">{{item.consumeTypeStr}}</view>
			</view>
			<view class="item">
				<view class="i_title">商品说明</view>
				<view class="i_text">{{item.goodMemo||''}}</view>
			</view>
			<view class="item">
				<view class="i_title">对方账户</view>
				<view class="i_text">{{item.accountName||''}}</view>
			</view>
			<view class="item">
				<view class="i_title">交易号</view>
				<view class="i_text">{{item.orderCode||''}}</view>
			</view>
			<view class="item">
				<view class="i_title">备注</view>
				<view class="i_text">{{item.remarks||''}}</view>
			</view>
			<!-- <view class="item">
				<view class="i_title">余额</view>
				<view class="i_text">{{item.afterAmount}}</view>
			</view> -->
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				consumeTypes:[],
				orderTypes:[],
				item:null,
				payTypeCfg:{1:'微信',2:'支付宝',3:'云闪付',4:'余额'},
			}
		},
		onLoad(option) {
			if(option.item){
				this.item = JSON.parse(decodeURIComponent(option.item));
				this.dealItem(this.item);
			} 
		},
		methods: {
			async getConsumeType(){
				return new Promise((resolve,reject)=>{
					this.$api.post('/api/dict/getListByTypes',['consume_type']).then(res=>{
						if(res.data.code===0){
							let temp = [];
							res.data.data.forEach(d=>{
								temp.push({
									key:d.dictValue,
									value:d.dictLabel
								});
							})
							resolve(temp);
						}else this.$showModal(res.data.msg);
					})
				})
			},
			async getOrderType(){
				return new Promise((resolve,reject)=>{
					this.$api.post('/api/dict/getListByTypes',['order_type']).then(res=>{
						if(res.data.code===0){
							let temp = [];
							res.data.data.forEach(d=>{
								temp.push({
									key:d.dictValue,
									value:d.dictLabel
								});
							})
							resolve(temp);
						}else this.$showModal(res.data.msg);
					})
				})
			},
			async dealItem(item){
				this.consumeTypes = await this.getConsumeType();
				this.orderTypes = await this.getOrderType();
				
				let ct = this.consumeTypes.find(c=>c.key==item.consumeType);
				this.$set(this.item,'title',ct?(ct.value+(item.consumeType==3?' - 自动转入':'')):'');
				this.$set(this.item,'consumeTypeStr',ct?ct.value:'');
				let ot = this.orderTypes.find(c=>c.key==item.orderType);
				let orderType = ot?ot.value:'';
				let exit = ct&&ot&&ot.value.indexOf(ct.value)>-1;
				this.$set(this.item,'goodMemo',exit?orderType:(orderType+(ct?ct.value:'')));
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		padding: 0 24rpx 36rpx;
		background: #fff;
		.top{
			width: 100%;
			padding: 48rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
			.t_title{
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #111111;
			}
			.t_price{
				font-size: 68rpx;
				font-family: D-DIN, D-DIN;
				font-weight: bold;
				color: #333333;
				margin-top: 20rpx;
			}
		}
		.item{
			display: flex;
			margin-top: 36rpx;
			.i_title{
				width: 200rpx;
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 32rpx;
			}
			.i_text{
				width: calc(100% - 200rpx);
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 32rpx;
				word-break: break-all;
			}
		}
	}
</style>